<!--
 * @Author: wangming
 * @Date: 2021-08-30 17:19:12
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-19 17:24:00
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hmDisplayConditions/index.vue
 * @Description: 
-->
<template>
  <div>
    <div class="ks-row-middle mb20 lh1">
      <div class="mr10 g3">显示条件设置</div>
      <i
        class="el-icon-circle-plus-outline iconcolor f20 poi"
        @click="addTag"
      ></i>
    </div>
    <div
      class="ks-row-middle g6 mt5 codebg"
      v-for="(item, jdex) in value.__highSetUp.DisplayConditions"
      :key="jdex"
    >
      <div class="ks-col">{{ item.label }}</div>
      <span
        class="iconfont iconbianji mr10 poi"
        @click="editDisplayConditions(jdex, item)"
      ></span>
      <span
        class="iconfont iconicon_shanchu poi"
        @click="removeDisplayConditions(jdex)"
      ></span>
    </div>
    <div
      class="ks-row-middle g6 mt5 codebg"
      v-for="(item, jdex) in value.__highSetUp.RuleConditions"
      :key="jdex"
    >
      <div class="ks-col">{{ item.name }}</div>
      <span
        class="iconfont iconbianji mr10 poi"
        @click="edit(jdex, item)"
      ></span>
      <span class="iconfont iconicon_shanchu poi" @click="remove(jdex)"></span>
    </div>
  </div>
</template>
<script>
import basicmixins from "../basicmixins";
import Module from "../__comModule__/addModule/index";
import Rule from "../__comModule__/addModule/rule";
import { mapGetters } from "vuex";
export default {
  mixins: [basicmixins],
  computed: {
    ...mapGetters(["getFormList"]),
    originModelList() {
      return this.getFormList.filter(
        (i) =>
          ["hlSelect", "hlCheckbox", "hlRadio"].indexOf(i.tagName) > -1 &&
          !!i.modelName
      );
    },
  },
  created() {
    try {
      !!this.value?.__highSetUp || this.$set(this.value, "__highSetUp", {});
      !!this.value?.__highSetUp?.DisplayConditions ||
        this.$set(this.value.__highSetUp, "DisplayConditions", []);
      !!this.value?.__highSetUp?.RuleConditions ||
        this.$set(this.value.__highSetUp, "RuleConditions", []);
    } catch (error) {}
  },
  methods: {
    removeDisplayConditions(index) {
      this.value.__highSetUp.DisplayConditions.splice(index, 1);
    },
    //兼容老版本规则
    editDisplayConditions(index, item) {
      Module.editModule(item, this.originModelList).then((form) => {
        this.value.__highSetUp.DisplayConditions.splice(index, 1, form);
      });
    },
    remove(index) {
      this.value.__highSetUp.RuleConditions.splice(index, 1);
    },
    edit(index, item) {
      Rule.editModule(item).then((form) => {
        this.value.__highSetUp.RuleConditions.splice(index, 1, form);
      });
    },
    addTag() {
      Rule.addModule().then((form) => {
        this.value.__highSetUp.RuleConditions.push(form);
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.codebg {
  background-color: #f3f9ff;
  padding: 2px 4px;
}
</style>